<template>
  <transition :name="closeTransition ? '' : 'at-zoom-in-center'">
    <span
      class="at-tag"
      :class="[type ? 'at-tag--' + type : '', {'is-hit': hit}]"
      :style="{backgroundColor: color}">
      <slot></slot>
      <i class="at-tag__close at-icon-close"
        v-if="closable"
        @click="handleClose"></i>
    </span>
  </transition>
</template>
<script>
    export default {
        name: 'AtTag',
        props: {
          text: String,
          closable: Boolean,
          type: String,
          hit: Boolean,
          closeTransition: Boolean,
          color: String
        },
        methods: {
          handleClose(event) {
              this.$emit('close', event);
          }
        }
    };
</script>
<style>
  .at-tag {
    background-color: #8391a5;
    display: inline-block;
    padding: 0 5px;
    height: 24px;
    line-height: 22px;
    font-size: 12px;
    color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid transparent;
    white-space: nowrap
  }

  .at-tag .at-icon-close {
    border-radius: 50%;
    text-align: center;
    position: relative;
    cursor: pointer;
    font-size: 12px;
    -ms-transform: scale(.75, .75);
    transform: scale(.75, .75);
    height: 18px;
    width: 18px;
    line-height: 18px;
    vertical-align: middle;
    top: -1px;
    right: -2px
  }

  .at-tag .at-icon-close:hover {
    background-color: #fff;
    color: #8391a5
  }

  .at-tag--gray {
    background-color: #e4e8f1;
    border-color: #e4e8f1;
    color: #48576a
  }

  .at-tag--gray .at-tag__close:hover {
    background-color: #48576a;
    color: #fff
  }

  .at-tag--gray.is-hit {
    border-color: #48576a
  }

  .at-tag--primary {
    background-color: rgba(32, 160, 255, .1);
    border-color: rgba(32, 160, 255, .2);
    color: #20a0ff
  }

  .at-tag--primary .at-tag__close:hover {
    background-color: #20a0ff;
    color: #fff
  }

  .at-tag--primary.is-hit {
    border-color: #20a0ff
  }

  .at-tag--success {
    background-color: rgba(18, 206, 102, .1);
    border-color: rgba(18, 206, 102, .2);
    color: #13ce66
  }

  .at-tag--success .at-tag__close:hover {
    background-color: #13ce66;
    color: #fff
  }

  .at-tag--success.is-hit {
    border-color: #13ce66
  }

  .at-tag--warning {
    background-color: rgba(247, 186, 41, .1);
    border-color: rgba(247, 186, 41, .2);
    color: #f7ba2a
  }

  .at-tag--warning .at-tag__close:hover {
    background-color: #f7ba2a;
    color: #fff
  }

  .at-tag--warning.is-hit {
    border-color: #f7ba2a
  }

  .at-tag--danger {
    background-color: rgba(255, 73, 73, .1);
    border-color: rgba(255, 73, 73, .2);
    color: #ff4949
  }

  .at-tag--danger .at-tag__close:hover {
    background-color: #ff4949;
    color: #fff
  }

  .at-tag--danger.is-hit {
    border-color: #ff4949
  }
</style>